<template>
  <div class="page">
    <h2>内容浏览</h2>
    <div class="filters">
      <select v-model="selectedTopic">
        <option v-for="t in topics" :key="t.id" :value="t.topic_id">{{ t.topic_name }} ({{ t.topic_id }})</option>
      </select>
      <input v-model="timeStart" placeholder="开始时间YYYY-MM-DD" />
      <input v-model="timeEnd" placeholder="结束时间YYYY-MM-DD" />
      <label><input type="checkbox" v-model="ignoreTime" /> 忽略无时间字段</label>
      <div class="platforms">
        <label v-for="p in platformOptions" :key="p">
          <input type="checkbox" :value="p" v-model="platforms" /> {{ p }}
        </label>
      </div>
      <button @click="onQuery">查询</button>
    </div>
    <ul>
      <li v-for="item in list" :key="item.platform + ':' + item.content_id">
        <span>[{{ item.platform }}] {{ item.title || item.text }}</span>
        <a :href="item.url" target="_blank">打开</a>
        <span>{{ item.published_at }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { listTopics, queryContents } from '../../api/social'

const topics = ref<any[]>([])
const selectedTopic = ref('')
const timeStart = ref('')
const timeEnd = ref('')
const ignoreTime = ref(false)
const platforms = ref<string[]>([])
const platformOptions = ['weibo','xhs','douyin','kuaishou']
const list = ref<any[]>([])

async function load() {
  const resp = await listTopics()
  topics.value = resp.data || []
}

async function onQuery() {
  const payload = {
    topic_code: selectedTopic.value || null,
    platforms: platforms.value,
    time_start: timeStart.value || null,
    time_end: timeEnd.value || null,
    ignore_time_filter: ignoreTime.value,
  }
  const resp = await queryContents(payload)
  list.value = (resp.data && resp.data.items) || []
}

onMounted(load)
</script>
<style scoped>
.page { padding: 16px }
.filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px }
.platforms { grid-column: 1 / span 2; display: flex; gap: 12px }
ul { list-style: none; padding: 0 }
li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 0 }
</style>
